<script setup lang='ts'>
  import { numberApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { reactive, ref } from 'vue';
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
  })
  const form = reactive({
    uuid:'',
    sign:''
  })
  const handleSubmit = async()=>{
    const loading = Toastloading()
    await numberApi.editUserSign(form)
    loading.close()
    closeDialog()
    $emit('updateList')
  }
  const openDialog = async(query:any = {})=> {
    const {user_id=''} = query;
    const loading = Toastloading()
    const res = await numberApi.userSign(user_id)
    Object.assign(form,{
      user_id,
      sign:res.data.sign
    })
    loading.close()
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
    title="个性签名">
    <el-form
        ref="dataForm"
        :model="form"
      >
        <el-form-item>
          <el-input
          type="textarea"
          v-model="form.sign"
          placeholder="请输入用户个性签名"
          :autosize="{ minRows: 14 }" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  .xm-dialog{
    .el-input {
        width: calc($inputWidth);
    }
}
</style>